<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流布局-flex</title>
    <style>
      /* css文件 */
      body {
        background: #e5e5e5;
      }
      #root {
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        width: 1200px;
      }
      .itemContainer {
        margin-right: 10px;
        flex-direction: column;
        width: 240px;
      }
      .item {
        margin-bottom: 10px;
        background: #fff;
      }
      .itemImg {
        width: 100%;
      }
      .userInfo {
        padding: 5px 10px;
      }
      .avatar {
        vertical-align: middle;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .username {
        margin-left: 5px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>瀑布流布局-flex</title>
        <style>
          .box {
            display: flex;
            flex-flow: column wrap;
            height: 100vh;
          }
          .item {
            margin: 10px;
            width: calc(100% / 3 - 20px);
          }
          .item img {
            width: 100%;
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="item">
            <img src="./imgs/1.jpg" alt="1" />
          </div>
          <div class="item">
            <img src="./imgs/2.jpg" alt="2" />
          </div>
          <div class="item">
            <img src="./imgs/3.jpg" alt="3" />
          </div>
          <div class="item">
            <img src="./imgs/1.jpg" alt="1" />
          </div>
          <div class="item">
            <img src="./imgs/2.jpg" alt="2" />
          </div>
          <div class="item">
            <img src="./imgs/3.jpg" alt="3" />
          </div>
          <div class="item">
            <img src="./imgs/1.jpg" alt="1" />
          </div>
          <div class="item">
            <img src="./imgs/2.jpg" alt="2" />
          </div>
          <div class="item">
            <img src="./imgs/3.jpg" alt="3" />
          </div>
          <div class="item">
            <img src="./imgs/1.jpg" alt="1" />
          </div>
          <div class="item">
            <img src="./imgs/2.jpg" alt="2" />
          </div>
          <div class="item">
            <img src="./imgs/3.jpg" alt="3" />
          </div>
          <div class="item">
            <img src="./imgs/1.jpg" alt="1" />
          </div>
        </div>
      </body>
    </html>
  </body>
</html>
